import { FormOutlined, PlusOutlined } from '@ant-design/icons';
import { ProDescriptionsItemProps, ProTable } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, message, Popconfirm } from 'antd';
import React from 'react';
const ClassPage: React.FC = ({  children, clrCategoryEnum }) => {
  const {classMajorEnum, actionRef, getHandler, endHandler } = useModel(
    'Class.model',
    (model) => {
      return {
        actionRef: model.actionRef,
        getHandler: model.getHandler,
        endHandler: model.endHandler,
        classMajor: model.classMajor,
        classMajorEnum: model.classMajorEnum,
      };
    },
  );

  const columns: ProDescriptionsItemProps<API.ClassInfo>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      align: 'center',
      width: 60,
    },
    {
      title: '班级名称',
      dataIndex: 'cls_name',
      initialValue: '',
      formItemProps: {
        roules: [
          { required: true, message: '用户姓名为必填项' },
          { min: 2, max: 10, message: '用户名字长度在2-10之间' },
        ],
      },
    },
    {
      title: '专业',
      dataIndex: 'cls_dic_id_major',
      valueEnum: classMajorEnum,
    },
    {
      title: '教学老师',
      dataIndex: 'cls_stf_id_teacher_name',
      hideInSearch: true,
    },
    {
      title: '教务老师',
      dataIndex: 'cls_stf_id_admin_name',
      hideInSearch: true,
    },
    {
      title: '就业老师',
      dataIndex: 'cls_stf_id_job_name',
      hideInSearch: true,
    },
    {
      title: '教室',
      dataIndex: 'cls_clsr_id',
      hideInSearch: true,
      valueEnum: clrCategoryEnum,
    },
    {
      title: '开课时间',
      dataIndex: 'cls_begin',
      hideInSearch: true,
    },
    {
      title: '结课时间',
      dataIndex: 'cls_end',
      hideInSearch: true,
    },
    {
      title: '班级状态',
      render: (_, record) => {
        return record.cls_begin ? (
          record.cls_end ? (
            <span style={{ color: 'green' }}>已结课</span>
          ) : (
            <span style={{ color: 'blue' }}>开课中</span>
          )
        ) : (
          <span style={{ color: 'red' }}>未开班</span>
        );
      },
    },
    { title: '备注', dataIndex: 'cls_remark', hideInSearch: true },
    {
      title: '操作',
      valueType: 'option',
      hideInSearch: true,
      hideInForm: true,
      render: (_, record) => (
        <>
          {React.cloneElement(
            children[1],
            { echoRecord: record },
            <Button type="primary" icon={<FormOutlined />}>
              修改
            </Button>,
          )}
          {!record.cls_begin &&
            React.cloneElement(
              children[2],
              { echoRecord: record },
              <Button type="link">开课</Button>,
            )}
          {!record.cls_end && record.cls_begin && (
            <Popconfirm
              title={'你确定要结课吗？'}
              onConfirm={() => endHandler(record)}
              onCancel={() => message.info('你取消了操作')}
              placement="topRight"
            >
              <Button danger>结课 </Button>
            </Popconfirm>
          )}
        </>
      ),
    },
  ];

  const proTableProps = {
    cardBordered: true,
    bordered: true,
    headerTitle: '用户列表',
    search: { searchText: '搜索', resetText: '重置' },
    actionRef: actionRef,
    pagination: { pageSize: 10 },
    toolBarRender: () =>
      React.cloneElement(
        children[0],
        null,
        <Button type="primary" icon={<PlusOutlined />}>
          新增
        </Button>,
      ),
    rowKey: 'cls_id',
    columns: columns,
    request: async (params: any) => {
      const { cls_name, cls_dic_id_major, cls_status, current, pageSize } =
        params;
      const { list, total } = await getHandler({
        cls_name,
        cls_dic_id_major,
        cls_status,
        begin: (current - 1) * pageSize,
        pageSize,
      });
      return {
        data: list,
        success: true,
        total: total,
      };
    },
  };
  return <ProTable<API.UserInfo> {...proTableProps}></ProTable>;
};
export default ClassPage;
